<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" :rules="rules" class="formInline" ref="formInline"
            label-width="116px" slot="form">
               <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="处理状态">
                          <el-select v-model="formInline.status" placeholder="请选择状态" 
                          style="width:100%">
                                <el-option v-for="(item,index) in statusArr" 
                                :key="index" :label="item.statusName" 
                                :value="item.statusId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班主任" prop="nameOrPhone">
                            <el-input v-model="formInline.nameOrPhone" placeholder="请输入班主任姓名或手机号" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="家长手机号" prop="phone">
                            <el-input v-model="formInline.phone" placeholder="请输入家长手机号" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                 </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="反馈的错误信息">
                          <el-select v-model="formInline.feedBack" placeholder="请选择状态" 
                          style="width:100%">
                                <el-option v-for="(item,index) in feedBackArr" 
                                :key="index" :label="item.wrongName" 
                                :value="item.type"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                 </el-row>
                <div class="top-line">
                    <el-button type="primary" @click="search('formInline')">查询</el-button>
                </div>
            </el-form>
            <div class="table-title"></div>
            <el-table :data="AnnounceList" border style="width: 100%" @selection-change="handleSelectionChange" ref="multipleTable" v-loading="loading">
                <el-table-column label="e学云ID号" align='center' min-width="100">
                    <template scope="scope">
                        {{scope.row.exueCode|| '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="姓名" align='center'>
                     <template scope="scope">
                        {{scope.row.studentName || '--'}}
                    </template>
                </el-table-column>
                 <el-table-column label="年级" align='center'>
                     <template scope="scope">
                         <p v-for="(item,index) in scope.row.list" :key="index">
                            {{item.gradeName || '--'}}
                         </p>
                    </template>
                </el-table-column>
                <el-table-column label="班级" align='center'>
                     <template scope="scope">
                         <p v-for="(item,index) in scope.row.list" :key="index">
                            {{item.className || '--'}}
                         </p>
                    </template>
                </el-table-column>
                <el-table-column label="班主任" align='center'>
                     <template scope="scope">
                        <p v-for="(item,index) in scope.row.list" :key="index">
                            {{item.teacherName}} 
                            <span v-if="item.teacherName&&item.teacherPhone">/</span> {{item.teacherPhone}}
                            <span v-if="!item.teacherName&&!item.teacherPhone">--</span>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column label="家长手机号" align='center' min-width="120">
                     <template scope="scope">
                        {{scope.row.phone || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="反馈的错误信息" align='center' min-width="130">
                     <template scope="scope">
                        {{scope.row.typeName || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="反馈时间"  align='center' min-width="156px">
                      <template scope="scope">
                        {{scope.row.createTime || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="处理状态"  align='center'  max-width="80px">
                    <template scope="scope">
                        {{scope.row.auditStatus=='0'?'未处理':scope.row.auditStatus=='1'?'已处理':'--'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="260" align='left'>
                    <template scope="scope">
                        <p v-if="scope.row.auditStatus=='0'">
                            <el-button type="text" class="btn-success" 
                                @click="goToCorrect(scope.row)">
                                修改学生信息
                            </el-button>
                            <el-button type="text" class="btn-success" 
                                @click="confirmInfor(scope.row)">
                                信息核实无误
                            </el-button>
                        </p>
                        <p v-else>
                            <span v-if="scope.row.auditStatus=='1'||!scope.row.auditStatus">--</span>
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" 
                :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>
<script>
import {pageStudentInfo, listWrongInfo, getAudit } from 'api/studInforFeedBackList';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import validate from '@/utils/validate';
export default {
    name: 'studInforFeedBack',
    components: { TableLayout},
    data() {
        var validateNamePhone = (rule, value, callback) => {
            var reg = /^[0-9]+.?[0-9]*$/;// 都是数字
            if (reg.test(value)) {
                var myreg=/^1[3456789]\d{9}$/;
                if (!myreg.test(value)) {
                    if (value.length!==11) {
                        callback(new Error('手机号码位数不足11位'));
                    } else {
                        callback(new Error('手机号码格式不正确'));
                    }
                } else {
                    this.formInline.teacherName='';
                    this.formInline.teacherPhone=this.formInline.nameOrPhone;
                    callback();
                }
            } else {
                this.formInline.teacherName=this.formInline.nameOrPhone;
                this.formInline.teacherPhone='';
                callback();
            }
        };
        return {
            loading: true,
            formInline: { // 查询 表单数据
                status: '', // 处理状态 ”处理状态0:未处理 1:已处理'”,
                nameOrPhone: '', // 班主任的姓名 或者 手机号
                phone: '', // 班主任手机号
                feedBack: '', // 反馈的错误信息
                teacherName: '',
                teacherPhone: ''
            },
            AnnounceList: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            feedBackArr: [], // 反馈的错误信息
            statusArr: [
                {statusName: '请选择', statusId: ''},
                {statusName: '未处理', statusId: '0'},
                {statusName: '已处理', statusId: '1'}
            ], 
            rules: {
                phone: [...validate.phone()],
                nameOrPhone: [
                    { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur' },
                    { validator: validateNamePhone, trigger: 'blur' }
                ]
            }
          
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表

        }),
        ...mapGetters([
            'uid',
            'schoolId',
            'schoolName'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },
    // 初始化
    created() {
        this.searchFetchData();
        this.listWrongInfo();
    },
    methods: {
        // 全局获取行数classStudent
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 确认信息无误
        confirmInfor(data) {
            this.$confirm('确定该学生的信息没有出错？建议跟学生的班主任或者家长核实之后再次确认', ' ', {
                confirmButtonText: '确定无误',
                cancelButtonText: '取消'
            }).then(() => {
                this.loading = true;
                let type=1;
                this.getAudit(type, data);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 跳转到 修改页面
        goToCorrect(data) {
            let studentId=data.studentId;
            let classObj=0;
            let id=data.id;
            let parentPhone= data.phone;
            let studentName= data.studentName;
            let isAudit= true;
            this.$router.push({ path: `/studentManage/studentInforPage/${studentId}/${classObj}/${id}/${parentPhone}/${studentName}/${isAudit}`});
        },
        getAudit(type, data) {
            let json={
                id: data.id,
                type,
                parentPhone: data.phone,
                studentName: data.studentName
            };
            getAudit(json).then(res => {                                     
                this.searchFetchData();
                if (type==1) {
                    this.$message({
                        type: 'success',
                        message: '信息审核成功!'
                    });
                }         
            }).catch(() => {
                this.loading = false;
            });
        },
        // 点击查询 
        search(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.loading = true;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },

        listWrongInfo() {
            listWrongInfo().then(res => {
                this.feedBackArr=res.data.content;
                this.feedBackArr.unshift({wrongName: '请选择', type: ''})
            })
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            let json={
                page: this.listQuery.page,
                rows: this.config.pageSize,
                schoolId: this.schoolId,
                status: this.formInline.status,
                type: this.formInline.feedBack,
                teacherName: this.formInline.teacherName,
                teacherPhone: this.formInline.teacherPhone,
                parentPhone: this.formInline.phone
            }
            pageStudentInfo(json).then(res => {
                this.loading = false;
                this.AnnounceList = res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
            }).catch(() => {
                this.loading = false;
            });
        },
        // 分页
        handleSizeChange(val) {
            this.loading = true;
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss">
@import '../../../styles/var';
.content {
    position: relative;
    padding: 0px;
    $bgcolor: #fff;
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right: 0px;
                top: 18px;
            }
        }
    }
}
</style>